<template>
  <div class="hend-box">
    <div class="login-img">
      <a href="/">
        <div>
          <img src="./../assets/wilmar-logo-white.png" alt="logo">
        </div>
        <span>备品备件管理系统</span>
      </a>
    </div>
    <div>
      <div class="el-dropdown" v-if="!token">
        <span class="el-dropdown-link" @click="onceClick('login')">
          <i class="el-icon-s-home"></i>
          {{'登陆'}}
        </span>
      </div>

      <template v-for="(item ,index) in menuList">
        <template v-if="item.children && item.children.length === 1 ">
          <div class="el-dropdown" :key="index" v-if="index">
            <span class="el-dropdown-link" @click="onceClick(item.children[0].name)">
              <i class="el-icon-s-home"></i>
              {{item.meta.title}}
            </span>
          </div>
        </template>
        <template v-else>
          <el-dropdown trigger="click" @command="handleCommand" :key="index">
            <span class="el-dropdown-link" @click="handleClick">
              <i :class="item.meta.icon"></i>
              {{item.meta.title}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <template v-for="(value,i) in item.children">
                <el-dropdown-item :command="value.name" :key="i">{{value.meta.title}}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </template>
      <el-dropdown trigger="click" @command="loginOut">
        <span class="el-dropdown-link" @click="handleClick">
          <i class="el-icon-s-custom"></i>
          {{'帐号'}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="推迟">{{'退出'}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex';

export default {
  name: 'header-info',
  data() {
    return {
      token: false,
      menuList: this.$store.getters.menuList,
    };
  },
  created() {
    console.log(this.menuList, this.token, '创建导航菜单');
    this.token = this.$store.state.user.token;
    if (!this.token) {
      this.menuList = [];
    }
    // setTimeout(() => {
    //   this.token = 1233;
    // }, 4000);
    // console.log(this.menuList, this.token);
  },
  computed: {
    // ...mapGetters(['menuList']), // 使用对象展开运算符将 getter 混入 computed 对象中
  },
  methods: {
    onceClick(item) {
      this.$router.push({ name: item });
    },
    handleCommand(command) {
      this.$router.push({ name: command });
    },
    handleClick() {
      // alert('button click');
    },
    loginOut() {
      this.$store.commit('setToken', '');
      this.$store.commit('setUserName', '');
      this.$router.push({ name: 'login' });
    },
  },
  watch: {
    token() {
      console.log('监控到token改变');
    },
    $route() {
      const { userName } = this.$store.state.user;
      console.log('监控到router改变');

      if (userName) {
        this.token = 123;
        this.menuList = this.$store.getters.menuList;
      } else {
        this.token = false;
        this.menuList = [];
      }
    },
  },
};
</script>

<style scoped lang="scss">
img {
  vertical-align: middle;
}

.hend-box {
  display: flex;
  flex-flow: flex-direction flex-wrap;
  justify-content: space-between;
}

.login-img {
  div {
    display: inline;
  }
  height: 60px;
  vertical-align: middle;

  a {
    display: inline-block;
    white-space: nowrap;
    font-size: 24px;
    color: #fff;
    line-height: inherit;
    span {
      font-size: 24px;
      font-weight: 600;
    }
  }
  img {
    display: inline-block;
    height: 45px;
  }
}
</style>
<style scoped lang="scss">
.el-dropdown-link {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 30px;
}
.el-dropdown-link:hover {
  color: rgb(255, 255, 255);
}
.el-icon-arrow-down {
  font-size: 14px;
}
.el-dropdown-menu {
  top: 47px !important;
}
.demonstration {
  border: 1px solid red;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
